<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="/vue_basic/js/vue.js"></script>
</head>
<body>
    <div id="test1">
        <h2>{{name}}</h2>
    </div>
    <script>

            //let 与 var 的区别
            //var
            // 1.变量不可以重复申明
			/* let star = '很多很多';
			let star = '规划嘀咕嘀咕嘀咕'; */
			// 重复申明会报错,但是var函数重复申明不会
			
			// 2.块儿级作用域 全局,函数,eval
			/* {
				let girl = '1';
			}
			console.log(girl); */
			// 因为girl的函数是let,并且在{}中,就是在块儿级作用域中,无法在{}外被读取,但是var函数就可以
			// 如果在if else while for 这些函数中一样是在块儿级作用域中
			
			// 3.不存在变量提升
			// 如果使用var函数并不会报错,因为 console.log(song) 执行前会收集有没有这个函数的信息 console.log(song) 会提前知道有var song的存在 .而使用let就会报错,在使用let函数的时候,console.log(song)不会提前知道let song 变量的存在.
			/* console.log(song); == undefined
			var song = '121212'; */
			
			// 4.不影响作用域链
			/* {
				let school = "111";
				function fn()
				{
					console.log(school);
				}
				fn();
			} */
			// 可以向外寻找

            //5. let声明的变量不与顶层对象挂钩,var声明的变量会自动挂载到顶层对象中
/*             
            var a = 100;
            console.log(window.a);
            // 正常
            let b = 200;
            console.log(window.b);
            //undefined
 */

            //const用来声名常量
            //const 与 var 的区别
            //const
            //1. const 变量不可以重复申明
            //2. const 不存在变量提升
            //3. const 声明的常量受作用域影响
            //4. const声明的变量不与顶层对象挂钩,var声明的变量会自动挂载到顶层对象中



            //const 与 let 的区别
            //1. let 声明时可以不赋值，const 声明必须赋值
            //2. let 声明的变量可以被更改，const 声明的变量没法被更改
            //3. const声明的对象时可以修改里面的属性
            



/*             
            let a ;
            a = 100
            console.log(a);
            正常

            const b;报错
            const c = 100;
            c = 200;
            报错
            console.log(c);
 */            


        const vm = new Vue({
            el:'#test1',
            data:{
                name:'wyf',
            },
        });
        console.log();

    </script>
    
    
</body>

</html>